import { Meta } from '@storybook/addon-docs';

<Meta title="API Reference/Conditional Styles" id="api-custom-conditional-formatting" />

# Conditional Style Object

| Property   | Type                               | Required | Description                                                                                                                                                                                                                                                       |
| ---------- | ---------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| when       | function: `row => row.<yourfield>` | yes      | `when` accepts a callback that gives you access to your data. The `when` callback must return a boolean to determine if the style will be applied. <br />e.g. `row => row.status === 'completed'` will apply the style when the `row.status` field is `completed` |
| style      | `object` or `(row) => object`      | no       | Accepts a css-in-js [style object](https://www.styled-components.com/docs/advanced#style-objects). Alternativly, you can also specify callback that has access to the row props. e.g. `(row) => ({ backgroundColor: row.isSpecial ? 'pink' : inherit })`          |
| classNames | `string[]`                         | no       | In some cases you may want to apply conditional classNames. Accepts an array of classes: e.g. `['class1', 'class2']`.                                                                                                                                             |

A Conditional Style Object allows you to apply a specific `style` object based on you data:

## Style Object

For example, let's say you want to apply a style `when` calories exceed 300:

```js
  {
    when: row => row.calories < 300,
    style: {
      backgroundColor: 'green',
      color: 'white',
      '&:hover': {
        cursor: 'pointer',
      },
    },
  },
```

## Style Callback

Alternativly, you can use a callback instead of a `style` object that has access to the row data:

```js
  {
    when: row => row.calories < 300,
    style: row => ({ backgroundColor: row.isSpecial ? 'pink' : 'green' }),
  },
```

# Conditional Row Styling

RDT allows you to override styling based on your data. Currently, you can apply conditional logic for rows using the `DataTable` property `

| Property             | Type  | Required | Default | Description                                                               |
| -------------------- | ----- | -------- | ------- | ------------------------------------------------------------------------- |
| conditionalRowStyles | array | no       | `[]`    | Allows an array of [conditional style objects](#conditional-style-object) |

## Example `style` Object

The following will `style` the background color of a row to green and set a hover effect `when` the expression `row => row.calories < 300` evaluates to true

```js
...
const conditionalRowStyles = [
  {
    when: row => row.calories < 300,
    style: {
      backgroundColor: 'green',
      color: 'white',
      '&:hover': {
        cursor: 'pointer',
      },
    },
  },
  // You can also pass a callback to style for additional customization
  {
    when: row => row.calories < 400,
    style: row => ({ backgroundColor: row.isSpecial ? 'pink' : 'inerit' }),
  },
];

const MyTable = () => (
  <DataTable
    title="Desserts"
    columns={columns}
    data={data}
    conditionalRowStyles={conditionalRowStyles}
  />
);

```

## Example `classNames` array

You can apply `classNames` instead or in addition to `style`:

```js
...
const conditionalRowStyles = [
  {
    when: row => row.calories < 300,
    classNames: ['luke', 'leia'],
  },
];

const MyTable = () => (
  <DataTable
    title="Desserts"
    columns={columns}
    data={data}
    conditionalRowStyles={conditionalRowStyles}
  />
);

```

**Note:** classNames are applied to the `TableRow` component and concatenated to the [`rdt_TableRow`](/docs/api-css-escape--page) class:

# Conditional Cell Styling

## Example `style` Object

You can also style individual cells by applying `conditionalCellStyles` to a `column` definition:

```js
import DataTable from 'react-data-table-component';

const columns = [
	{
		name: 'Name',
		selector: row => row.name,
	},
	{
		name: 'Calories (g)',
		selector: row => row.calories,
		conditionalCellStyles: [
			{
				when: row => row.calories < 300,
				style: {
					backgroundColor: 'rgba(63, 195, 128, 0.9)',
					color: 'white',
					'&:hover': {
						cursor: 'pointer',
					},
				},
			},
			{
				when: row => row.calories >= 300 && row.calories < 400,
				style: {
					backgroundColor: 'rgba(248, 148, 6, 0.9)',
					color: 'white',
					'&:hover': {
						cursor: 'pointer',
					},
				},
			},
			{
				when: row => row.calories >= 400,
				style: {
					backgroundColor: 'rgba(242, 38, 19, 0.9)',
					color: 'white',
					'&:hover': {
						cursor: 'not-allowed',
					},
				},
			},
      // You can also pass a callback to style for additional customization
      {
        when: row => row.calories < 600,
        style: row => ({ backgroundColor: row.isSpecial ? 'pink' : 'inerit' }),
      },
		],
	},
];

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
		/>
	);
);
```

## Example `classNames` Object

As with conditionalRows you can also apply `classNames` to a column cell instead of or in addition to `style`:

```js
import DataTable from 'react-data-table-component';

const columns = [
	{
		name: 'Name',
		selector: row => row.name,
	},
	{
		name: 'Calories (g)',
		selector: row => row.calories,
		conditionalCellStyles: [
			{
				when: row => row.calories < 300,
				classNames: ['success'],
			},
			{
				when: row => row.calories >= 300 && row.calories < 400,
				classNames: ['warning'],
			},
			{
				when: row => row.calories >= 400,
				classNames: ['error'],
			},
		],
	},
];

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
		/>
	);
);
```

**Note:** classNames are applied to the `TableCell` component and concatenated to the [`rdt_TableCell`](/docs/api-css-escape--page) class: